/* components */
import Radio from '@src/component/business/BizChatPanel/app/radio'
/* enum */
import { ComponentNameEnum } from '@src/component/business/BizChatPanel/chat/model/enum'
/* vue */
import { defineComponent, PropType } from "vue";
/* scss */
import '@src/component/business/BizChatPanel/app/index.scss'
/* types */
import { SettingGPTServiceItem } from '@src/modules/setting/gpt/types';

type RadioComponent = InstanceType<typeof Radio>

enum ChatAIAppServiceListEventEnum {
  Change = 'change',
  Click = 'click',
  Cancel = 'cancel',
  Confirm = 'confirm'
}

export default defineComponent({
  name: ComponentNameEnum.ChatAIAppServiceList,
  emits: [
    ChatAIAppServiceListEventEnum.Change,
    ChatAIAppServiceListEventEnum.Click,
    ChatAIAppServiceListEventEnum.Cancel,
    ChatAIAppServiceListEventEnum.Confirm
  ],
  props: {
    currentApp: {
      type: Object as PropType<SettingGPTServiceItem>,
      default: () => ({})
    },
    list: {
      type: Array as PropType<SettingGPTServiceItem[]>,
      default: () => []
    }
  },
  data() {
    return {
      value: ''
    }
  },
  computed: {
    className(): string {
      return ComponentNameEnum.ChatAIAppServiceList
    },
    classNames(): Record<string, boolean> {
      return {
        [ComponentNameEnum.ChatAIAppServiceList]: true
      }
    },
    radioComponent(): RadioComponent {
      return this.$refs.Radio as RadioComponent
    }
  },
  watch: {
    currentApp: {
      handler(val: SettingGPTServiceItem) {
        this.value = val.type
      },
      immediate: true
    }
  },
  methods: {
    resetValue() {
      this.value = this.currentApp.type
    },
    onChangeHandler(value: string) {
      this.value = value
    },
    onCancelHandler() {
      this.$emit(ChatAIAppServiceListEventEnum.Cancel, this.value)
    },
    onConfirmHandler() {
      this.$emit(ChatAIAppServiceListEventEnum.Confirm, this.value)
    },
    renderFooter() {
      return (
        <div class={`${this.className}__footer`}>
          
          <el-button
            onClick={this.onCancelHandler}
          >
            取消
          </el-button>
          
          <el-button 
            type="primary"
            onClick={this.onConfirmHandler}
          >
            确定选择
          </el-button>
          
        </div>
      )
    }
  },
  render() {
    return (
      <div class={this.classNames}>
        
        <Radio
          value={this.value}
          list={this.list}
          onChange={this.onChangeHandler}
        />
        
        { this.renderFooter() }
        
      </div>
    )
  }
});